header {
    position: relative;
    width: 100%;
    height: 30px;
    background:linear-gradient(to right,#f370af 0,#5515ee 100%);
    text-align: center;
}
header .left .arrow-down {
    position: absolute;

    left: 20px;
    width: 30px;
    height: 30px;
    background-image: url(../../../image/left_bottom_tips_icon_vip.png);
    background-size: 30px 30px;
    -webkit-transition: all 200ms;
    transition: all 200ms;
}

header .title {
    position: relative;

    height: 30px;
    width: 100%;
}
header .title img{
    width: 30px;
    height: 30px;
    float: left;
}
header .title .search{
    width: 210px;
    height: 30px;
    margin: 0px auto;
    background-color: rgba(255,255,255,0.4);
    border-radius: 16px;
    color: #fff;
}
header .title .search span{
    margin-top: 4px;
}

header .right {
    position: absolute;
    bottom: 0;
    right: 20px;
    width: 30px;
    height: 30px;
    background: url(../../../image/home_history_icon.png);
    background-size: 30px 30px;
    background-position: center center;
    background-repeat: no-repeat;
}


nav {
    width: 100%;
    height: 47px;
    background:linear-gradient(to right,#f370af 0,#5515ee 100%);
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-flex-flow: row;
    flex-flow: row;
}

nav .menu {
    width: 100%;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    height: 47px;
    line-height: 47px;
    color: #9aa0b7;
    font-size: 13px;
    text-align: center;
}

nav .selected {
    font-weight: bolder;
    color: #14b7ff;
    font-size: 15px;
}

.active {
    opacity: 0.7;
}